<template>
  <div style="margin-top:25px">
    <a-button @click="refresh" :loading="loading">加载全部</a-button>
  
    <vxe-table
      ref="xTree"
      border="inner"
      :data="things"
      :tree-config="{ children: 'children' }"
      style="margin-top:10px"
    >
      <vxe-table-column field="s_name" title="名称" tree-node>
      </vxe-table-column>
      <vxe-table-column field="uid" title="ID"> </vxe-table-column>
      <vxe-table-column field="model_name" title="物模型"> </vxe-table-column>
      <vxe-table-column field="catalog_id" title="类型"> </vxe-table-column>
      <vxe-table-column
        field="is_station"
        title="是否为站"
        :formatter="stationText"
      >
      </vxe-table-column>
      <vxe-table-column
        field="state"
        title="在线状态"
        :formatter="formatterState"
      >
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import { getThings } from "@/services/things";
export default {
  data() {
    return {
      things: [],
      loading: false,
      stateList: [
        { label: "离线", value: 0 },
        { label: "在线", value: 1 },
      ],
    };
  },
  methods: {
    refresh() {
      let self = this;
      this.loading = true;
      getThings().then((things) => {
        self.things = things;
        
      }).finally(()=>{
        self.loading = false;
      });
    },
    formatterState({ cellValue }) {
      if (cellValue == "-") {
        return cellValue;
      }
      console.log("____________", cellValue);
      return this.stateList[cellValue].label;
    },
    stationText({ cellValue }) {
      return cellValue ? "是" : "否";
    },
  },
};
</script>